<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ztree</title>
		<script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
		<script src="${pageContext.request.contextPath}/js/ztree/jquery.ztree.all.js"></script>
		<script src="${pageContext.request.contextPath}/js/ztree/jquery.ztree.core.js"></script>
		<script src="${pageContext.request.contextPath}/js/ztree/jquery.ztree.excheck.js"></script>
		<script src="${pageContext.request.contextPath}/js/ztree/jquery.ztree.exedit.js"></script>
		<script src="${pageContext.request.contextPath}/js/ztree/jquery.ztree.exhide.js"></script>
		<link rel="stylesheet" href="${pageContext.request.contextPath}/css/zTreeStyle/zTreeStyle.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/css/zTreeStyle/demo.css" />
	</head>
	<script>
		var zTreeObj;
// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
var setting = {
		edit:{
			enable: true,
			drag:{
				isMove:true,
				prev:true,
				autoOpenTime: 0
			},
		/* editNameSelectAll: true,
		showRemoveBtn: true,
		removeTitle: "删除节点",
		renameTitle: "编辑节点名称",
		showRenameBtn: true, */
		expandAll:true,
		},
		data: {
			simpleData: {
				enable: true,
				idKey: "id",
				nameKey: "name"
			}

		},
		view:{
			showLine:true,
			showIcon:true,
			dblClickExpand: false
		},
		callbak:{
			onRightClick: OnRightClick,
			 onClick:onClick
		}

	};
		
		$(document).ready(function(){
			$.ajax({
				url:'getBaseInfo',
				type: "get",
				dataType: "json",
				success:function(data){
					 
					//树形菜单初始化
					//alert(data);
					  zTreeObj = $.fn.zTree.init($("#treeDemo"), setting,data);
					  zTreeObj.expandAll(true);
				},
				error:function(xhr){
						alert(xhr.status);
				}
			});
		});
		
		 
		function onClick(){
			
			
		}
		
		
		function OnRightClick(event, treeId, treeNode) {
			if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
				zTree.cancelSelectedNode();
				showRMenu("root", event.clientX, event.clientY);
			} else if (treeNode && !treeNode.noR) {
				zTree.selectNode(treeNode);
				showRMenu("node", event.clientX, event.clientY);
			}
		}

		function addTreeNode() {
			hideRMenu();
			var newNode = { name:"增加" + (addCount++)};
			if (zTree.getSelectedNodes()[0]) {
				newNode.checked = zTree.getSelectedNodes()[0].checked;
				zTree.addNodes(zTree.getSelectedNodes()[0], newNode);
			} else {
				zTree.addNodes(null, newNode);
			}
		}
		// 显示 右边菜单
		function showRMenu(type, x, y) {
			$("#rMenu ul").show();
			if (type=="root") {
				$("#m_del").hide();
				$("#m_check").hide();
				$("#m_unCheck").hide();
			} else {
				$("#m_del").show();
				$("#m_check").show();
				$("#m_unCheck").show();
			}

            y += document.body.scrollTop;
            x += document.body.scrollLeft;
            rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible"});

			$("body").bind("mousedown", onBodyMouseDown);
		}
		// 隐藏右边菜单
		function hideRMenu() {
			if (rMenu) rMenu.css({"visibility": "hidden"});
			$("body").unbind("mousedown", onBodyMouseDown);
		}
		function onBodyMouseDown(event){
			if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
				rMenu.css({"visibility" : "hidden"});
			}
		}
	</script>
	<body>
		<div id="treeDemo" class="ztree"></div>
		
		<div id="rMenu">
	<ul>
		<li id="m_add" onclick="addTreeNode();">增加节点</li>
		<li id="m_del" onclick="removeTreeNode();">删除节点</li>
		 
	</ul>
</div>
	</body>
</html>
